<template>
  <h1>okokok</h1>
  <el-menu style="width:200px">
    <el-sub-menu>
      <template #title>
        <el-icon><Stamp/></el-icon>
           <span>权限管理1</span>
      </template>

      <el-menu-item index="/home/user">
          <el-icon><User/></el-icon>
          <span>用戶管理</span>
      </el-menu-item>

      <el-menu-item index="/home/role">
        <el-icon><HomeFilled/></el-icon>
        <span>角色管理</span>
      </el-menu-item>

     <el-menu-item index="/home/menu">
        <el-icon><View/></el-icon>
        <span>菜单管理</span>
      </el-menu-item>

    </el-sub-menu>
  </el-menu>

  <hr>

  <el-menu style="width:200px">
    <el-sub-menu v-for="item in menuList" :key="item.id">
      <template #title>
        <el-icon>
          <component :is="item.icon"/>
        </el-icon>
        <span>{{item.name}}</span>
      </template>

      <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id">
          <el-icon>
            <component :is="subItem.icon"/>
          </el-icon>
          <span>{{subItem.name}}</span>
      </el-menu-item>

    </el-sub-menu>
  </el-menu>

</template>

<script setup>

import {User,HomeFilled,View,Stamp} from '@element-plus/icons-vue'

import { ref } from 'vue'
const menuList = ref([
  {
    id: 1,
    name: '权限管理1',
    path: '/home',
    icon: Stamp,
    children: [
      { id: 11, name: '用户管理', path: '/home/user', icon: User },
      { id: 12, name: '角色管理', path: '/home/role', icon: HomeFilled},
      { id: 13, name: '菜单管理', path: '/home/menu', icon: View },
    ],
  }
])
</script>

<style scoped>

</style>